<div class="message-background" *ngIf="isShowRateCard">
  <div class="message-header">
    <ion-row justify-content-end>
      <button float-right ion-button clear icon-only color="grey" (click)="hideCard()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-row>
  </div>
  <div class="message-content">
    <ion-row class="title-container">
      <div class="message-icon"><img src="assets/img/help-question-blue.svg" /></div>
      <div class="message-title" translate>Feedback</div>
    </ion-row>
    <div class="message-body">{{feedbackCardTitle}}</div>
    <ion-list class="bp-list">
      <ion-row class="icons-row">
        <ion-col col-20>
          <ion-icon class="icon-svg" (click)="setScore(1)">
            <img [ngClass]="{'opacity-low': score > 0 && score != 1}" src="assets/img/disappointed-face.svg" />
          </ion-icon>
        </ion-col>
        <ion-col col-20>
          <ion-icon class="icon-svg" (click)="setScore(2)">
            <img [ngClass]="{'opacity-low': score > 0 && score != 2}" src="assets/img/satisfied-face.svg" />
          </ion-icon>
        </ion-col>
        <ion-col col-20>
          <ion-icon class="icon-svg" (click)="setScore(3)">
            <img [ngClass]="{'opacity-low': score > 0 && score != 3}" src="assets/img/happy-face.svg" />
          </ion-icon>
        </ion-col>
      </ion-row>
    </ion-list>
    <div *ngIf="button_title">
      <div class="line-divider"></div>
      <span class="message-button" (click)="goFeedbackFlow()">{{button_title}}</span>
    </div>
  </div>
</div>
<div class="message-background message-background--survey" *ngIf="!isShowRateCard && surveyCardShown">
  <div class="message-header">
    <ion-row justify-content-end>
      <button float-right ion-button clear icon-only color="grey" (click)="hideSurvey()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-row>
  </div>
  <div class="message-content">
    <ion-row class="title-container">
      <div class="message-icon"><img src="assets/img/icon-heart-pink.svg" /></div>
      <div class="message-title" translate>Help BitPay improve</div>
    </ion-row>
    <div class="message-body">Take a 2 minute survey to help us learn how we can improve your experience.</div>
    <div>
      <div class="line-divider"></div>
      <span class="message-button" (click)="takeSurvey()">Take the survey</span>
    </div>
  </div>
</div>